<template>
  <div class="ui-page page__has-bottom  page-order-confirm">
    <div class="page-container">
      <div class="order-confirm--container">
        <!-- 订单的商品信息 -->
        <div class="confirm-orderinfo">
          <div class="panel-header">商品信息</div>
          <div class="panel-body">
            <div class="goods-container">
              <div class="goods-image">
                <image :src="lesson.lessonPic" alt />
              </div>
              <div class="goods-info">
                <div class="goods-info--name">{{ lesson.lessonName }}</div>
                <div class="goods-info--money">
                  <span>{{ lesson.lessonPrice | currency_format('￥') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="confirm-panel confirm-pattern--payments-other">
        <!-- 支付方式 -->
        <uiCell title="微信支付" is-link @click="handleClickGotoVIP" titleWidth="500rpx">
          <template v-slot:title>
            <span>
              <div class="confirm-radion--label">
                <span>加入VIP免费观看</span>
                <span
                  v-if="lesson.isVip"
                  style="color:#f54305"
                >(VIP:{{ lesson.lessonCheapPrice | currency_format('￥') }})</span>
              </div>
            </span>
          </template>
          <template v-slot:righticon>开通>></template>
        </uiCell>
      </div>
    </div>
    <div class="page-bottom page-view-submit-bar">
      <div class="submit-bar--container">
        <span class="submit-bar--info">
          <!-- 如果是优惠价 -->
          <span v-if="lesson.isVip === 'Y' && user.isVip === 'Y'">
            VIP优惠价
            <span
              class="submit-bar--info-color"
            >{{lesson.lessonCheapPrice | currency_format('￥')}}</span>
          </span>
          <span v-else>
            实付
            <span class="submit-bar--info-color">{{lesson.lessonPrice | currency_format('￥')}}</span>
          </span>
        </span>
        <span class="submit-bar--submit" @click="handleClickGotoNext">下一步</span>
      </div>
    </div>
  </div>
</template>

<script>
import uiCell from "@/components/base/cell/index";
import { payLessonInfo, addOrder, wechatPay } from "api/order/order.js";
export default {
  name: "orderComfirmPage",
  components: {
    uiCell
  },
  data() {
    return {
      lessonId: "",

      // 支付方式
      payment: "1",
      // 当前用户的信息
      user: {
        isVip: "N"
      },
      lesson: {
        lessonPic: "",
        lessonName: "",
        lessonPrice: "",
        isCheap: "",
        // 课程是否是VIP课程
        isVip: "N",
        // targetType，1是课程，2是会员课程，3是专属
        targetType: 1,
        // 优惠价
        lessonCheapPrice: ""
      }
    };
  },
  onLoad(e) {
    debugger;

    this.lessonId = e.id;
    this.loadOrderBasicInfo();
  },
  created() {
    // this.lessonId = this.$route.params.id;
  },
  watch: {},
  methods: {
    /**
     * 加载当前课程的订单信息
     */
    loadOrderBasicInfo() {
      var params = {
        targetId: this.lessonId,
        targetType: 1
      };
      var self = this;
      payLessonInfo(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          this.$toast.fail(respMsg);
        }
        if (result) {
          // 课程的信息
          this.lesson.lessonPic = result.lessonPowerInfo.lesson.lessonPic;
          this.lesson.lessonName = result.lessonPowerInfo.lesson.lessonName;
          // 课程的正常价格
          this.lesson.lessonPrice =
            result.lessonPowerInfo.lesson.lessonPrice || 0;
          // targetType，1是课程，2是会员，3是专属
          this.lesson.targetType = result.lessonPowerInfo.targetType;
          // lessonPowerInfo.targetType === 2 代表这个课程是VIP课程
          this.lesson.isVip =
            result.lessonPowerInfo.targetType === 2 ? "Y" : "N";
          // 当前用户是否是VIP，修改返回数据中 N === null 改为 是(Y) 否(N)
          this.lesson.isCheap = result.lessonPowerInfo.isCheap ? "Y" : "N";
          // 课程的优惠价格
          this.lesson.lessonCheapPrice =
            result.lessonPowerInfo.lesson.lessonCheapPrice || 0;
          // 当前用户是否是VIP，修改返回数据中 N === null 改为 是(Y) 否(N)
          this.user.isVip = result.lessonPowerInfo.isVip === 1 ? "Y" : "N";
        }
      });
    },

    /**
     * 选中支付方式
     */
    handleClickGotoNext() {
      // this.$router.push({
      //   path: `/pages//comfirm-payment/${this.lessonId}`,
      //   query: {
      //     sid: this.$route.query.sid
      //   }
      // });

      this.$url.navigateTo({
        url: "/pages/buy/comfirm-type/index",
        query: {
          id: this.lessonId
        }
      });
    },
    /**
     * 购买VIP
     * 跳转到VIP购买页面
     */
    handleClickGotoVIP() {
      this.$router.push({
        path: `/my/subscriber`,
        query: {
          sid: this.$route.query.sid,
          redirect: this.$route.fullPath
        }
      });
    },
    /**
     * 激活码兑换
     * 跳转到激活码兑换页面
     */
    handleClickGotoActivationCode() {
      // 第一步 生成订单
      var params = {
        orderType: 3,
        productId: this.lessonId
      };
      addOrder(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (result) {
          this.$router.push({
            path: `/order/activation-code/${result}`,
            query: {
              sid: this.$route.query.sid
            }
          });
        }
      });
    },
    /**
     * 微信支付购买
     * 进行微信支付操作
     */
    handleClickWeixinPay() {
      // const beforeCreateOrder = () => {
      //   return new Promise((resolve, reject) => {
      //     var params = {
      //       amount: this.lessonPrice,
      //       orderType: 1,
      //       productId: this.lessonId,
      //       productNum: 1
      //     };
      //     var self = this;
      //     addOrder(params).then(({ respCode, respMsg, result }) => {
      //       if (respCode !== "0") {
      //         // 加载失败
      //         this.$toast.fail(respMsg);
      //         reject({
      //           respMsg: respMsg
      //         });
      //         return;
      //       }
      //       if (result) {
      //         resolve({
      //           orderNo: result
      //         });
      //       }
      //     });
      //   });
      // };
      // const readyPay = ({ orderNo }) => {
      //   return new Promise((resolve, reject) => {
      //     var params = {
      //       out_trade_no: orderNo
      //     };
      //     var self = this;
      //     wechatPay(params).then(({ respCode, respMsg, result }) => {
      //       if (respCode !== "0") {
      //         // 加载失败
      //         this.$toast.fail(respMsg);
      //         reject({
      //           respMsg: respMsg
      //         });
      //         return;
      //       }
      //       if (result) {
      //         resolve({
      //           ...result
      //         });
      //       }
      //     });
      //   });
      // };
      // beforeCreateOrder().then(orderNo => {
      //   readyPay(orderNo).then(
      //     ({ appid, timeStamp, nonceStr, packAge, signType, paySign }) => {
      //       wxPay(appid, timeStamp, nonceStr, packAge, signType, paySign)
      //         .then(() => {
      //           this.$router.push({
      //             path: `/order/pay-success/${orderNo}`,
      //             query: {
      //               sid: this.$route.query.sid
      //             }
      //           });
      //         })
      //         .catch(({ respCode, respMsg }) => {
      //           // this.$dialog.alert({
      //           //   title: '支付失败',
      //           //   message: respMsg,
      //           // });
      //         });
      //     }
      //   );
      // });
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
